<template>
  <div v-if="haveData === true">
    <div style="margin-top: 3%"/>
    <div style="width: 72%;margin: 0 auto;display: flex;">
      <el-card class="box-card" style="width: 16%;text-align: center">
        <div>
          <span>已完成课程数</span>
        </div>
        <div>
          <span>{{gradeStatistics.total}}</span>
        </div>
      </el-card>
      <div style="width: 5%"/>
      <el-card class="box-card" style="width: 16%;text-align: center">
        <div>
          <span>已通过课程数</span>
        </div>
        <div>
          <span>{{gradeStatistics.passed}}</span>
        </div>
      </el-card>
      <div style="width: 5%"/>
      <el-card class="box-card" style="width: 16%;text-align: center">
        <div>
          <span>未通过课程数</span>
        </div>
        <div>
          <span>{{gradeStatistics.failed}}</span>
        </div>
      </el-card>
      <div style="width: 5%"/>
      <el-card class="box-card" style="width: 16%;text-align: center">
        <div>
          <span>课程合格率</span>
        </div>
        <div>
          <span>{{gradeStatistics.passPct}} %</span>
        </div>
      </el-card>
      <div style="width: 5%"/>
      <el-card class="box-card" style="width: 16%;text-align: center">
        <div>
          <span>成绩优秀率</span>
        </div>
        <div>
          <span>{{gradeStatistics.excellence}} %</span>
        </div>
      </el-card>
    </div>
    <div style="margin-top: 3%"/>
    <div style="width: 60%;margin: 0 auto;">
      <div style="display: flex;">
        <span style="margin-right: 2%;margin-left: 5%">课程平均得分 : </span>
        <el-progress style="width: 64%"
                     :text-inside="true"
                     :stroke-width="24"
                     :percentage="gradeStatistics.avgScore"
                     status="success">
        </el-progress>
        <span style="margin-left: 2%">(满分100%)</span>
      </div>
      <div style="display: flex;margin-top: 2%">
        <span style="margin-right: 2%;margin-left: 5%">平均排名超越 : </span>
        <el-progress style="width: 64%"
                     :text-inside="true"
                     :stroke-width="24"
                     :percentage="gradeStatistics.avgRank"
                     status="success">
        </el-progress>
        <span style="margin-left: 2%">的学生</span>
      </div>
    </div>
    <div style="margin-top: 2%"/>
    <div style="width: 60%;margin: 0 auto;">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="各学期课程平均成绩" name="first">
            <span>说明 : 平均成绩显示为占总分的百分比</span>
          </el-tab-pane>
          <el-tab-pane label="各学期课程平均排名" name="second">
            <span>说明 : 平均排名显示为超过的学生比例</span>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="margin-top: 1%">
        <div ref="statistics" style="width: 100%;height: 450px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      haveData:false,
      student:{
        stuId: '',
      },
      gradeStatistics:{},
      activeName: 'first',
      X: [],
      Y: [],
    }
  },
  created() {
    this.student.stuId = JSON.parse(sessionStorage.getItem("id"));
    this.getData();
  },
  methods:{
    getData(){//获取数据
      let path = 'http://localhost:8081/statistics/getStuStatistics';
      this.$ajax.post(path,this.student).then(res=>{
        if(res.data.status === 0){
          this.haveData = true;
          this.gradeStatistics = res.data.obj;
          setTimeout(()=>{
            this.drawLineCompany();
          },100);
        }
        else{
          this.$message.error(res.data.message);
        }
      })
    },
    handleClick() {
      this.drawLineCompany(this.activeName);
    },
    drawLineCompany(val){
      let echarts = require('echarts')
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.statistics)//绑定在哪个组件上显示
      this.drawCompanyChart(myChart);
      myChart.showLoading();// 加载动画
      //坐标数据置空
      this.X = [];
      this.Y = [];
      //X轴为学期
      for(let i = 0;i < this.gradeStatistics.termList.length;i++){
        this.X.push(this.gradeStatistics.termList[i].termName);
      }
      if(val != null && val === 'second'){//排名统计
        for(let i = 0;i < this.gradeStatistics.termAvgRank.length;i++){
          this.Y.push(this.gradeStatistics.termAvgRank[i]);
        }
      }
      else{//默认是成绩统计
        for(let i = 0;i < this.gradeStatistics.termAvgScore.length;i++){
          this.Y.push(this.gradeStatistics.termAvgScore[i]);
        }
      }
      myChart.hideLoading();
      // 填入数据
      myChart.setOption({
        xAxis: {
          data: this.X,
        },
        series: [{
          name: '百分比',
          data: this.Y,
        }]
      });
    },
    drawCompanyChart(myChart) {
      //指定图表配置项和数据
      var option = {
        //标题
        title : {
          text : `各学期课程统计`,
          left : 150,//距离左边的像素值
          borderColor : '#ff4b2d',
          borderWidth : 1
        },
        color: ['#ed0c1b'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        //工具箱
        toolbox:{
          show:true,
          feature:{
            saveAsImage:{
              show:true
            },
            dataView:{
              show:true
            },
            magicType:{
              type:['bar','line']
            }
          }
        },
        //图例
        legend:{
          data:['百分比']
        },
        //x轴
        xAxis : {
          type : 'category',
          data : [],
          axisLabel:{
            interval:0,//全部显示x轴
            rotate: -30//30度倾斜显示
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        //y轴
        yAxis : {
          type : 'value'
        },
        //数据
        series : {
          name : '百分比',
          type : 'bar',//柱状图
          data : []
        },
      };
      myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
span{
  font-size: 18px;
}
</style>